
<template>
  <el-container style="height: 700px; border: 1px solid #eee">
    <el-aside width="230px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']" v-for="item in tagList">
        <el-submenu :index="item.selfid">
          <template slot="title"
            ><i class="el-icon-message"></i>{{ item.tagname }}</template
          >
          <el-menu-item-group v-for="item in userRelationList">
            <el-submenu :index="item.relationlevel">
              <template slot="title">{{ item.relationlevel }}</template>
              <el-menu-item-group
                v-for="tbUserrelationList in item.tbUserrelationList"
              >
                <el-menu-item
                  :index="tbUserrelationList.friendid"
                  @click="
                    toWithFriendChat(
                      tbUserrelationList.userid,
                      tbUserrelationList.friendid,
                      tbUserrelationList.friendname
                    )
                  "
                  >{{ tbUserrelationList.friendname }}</el-menu-item
                >
              </el-menu-item-group>
            </el-submenu>
          </el-menu-item-group>
          <!-- <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group> -->
          <!-- <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu> -->
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>新朋友</template>
          <el-menu-item index="2-1" @click="toAddNewFriendPage()"
            >添加新好友</el-menu-item
          >
          <el-badge
            :value="newFriendCount"
            class="item"
            :hidden="newFriendCount == 0"
          >
            <el-menu-item index="2-2" @click="toApplyPage()"
              >收到的好友请求</el-menu-item
            >
          </el-badge>
        </el-submenu>
        <!-- <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu> -->
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{ this.userinfo.username }}</span>
      </el-header>

      <el-main>
        <div v-if="showChat == 1" style="width: 1250px; height: 581px">
          <div
            style="width: 1250px;
              height: 50px;
              background-color: RGB(238, 241, 246);
              text-align: center;
              line-height: 45px;
            "
          >
            {{ this.showFriendName }}
          </div>
          <div
            style="overflow-x: hidden; width: 1250px; height: 350px"
            class="messageBoxPlus"
          >
            <el-row :gutter="20" v-for="item in tableDataChat">
              <el-col
                :span="12"
                style="float: left"
                v-if="item.fromuserid == fromuserid"
                ><div class="grid-content bg-purple">
                  <div>
                    <el-avatar v-if="item.fromuserid == fromuserid"
                    :src=friendinfo.userimage
                    ></el-avatar>
                  </div>
                  <div>
                    <!-- <el-card class="box-card"> -->
                    <!-- <div v-for="o in 4" :key="o" class="text item">
                {{ "列表内容 " + o }}
              </div> -->
                    <!-- {{ item.message }}
            </el-card> -->
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 3 }"
                      class="box-card"
                      placeholder="请输入内容"
                      :disabled="true"
                      v-model="item.message"
                    >
                    </el-input>
                  </div></div
              ></el-col>
              <el-col
                :span="12"
                style="float: right"
                v-if="item.fromuserid == touserid"
                ><div class="grid-content bg-purple">
                  <div>
                    <!-- <el-card class="box-card"> -->
                    <!-- <div v-for="o in 4" :key="o" class="text item">
                {{ "列表内容 " + o }}
              </div> -->
                    <!-- {{ item.message }}
            </el-card> -->
                    <el-input
                      type="textarea"
                      :autosize="{ minRows: 3 }"
                      class="box-card"
                      placeholder="请输入内容"
                      :disabled="true"
                      v-model="item.message"
                    >
                    </el-input>
                    <!-- {{ this.$message(item.message) }} -->
                  </div>
                  <div>
                    <el-avatar v-if="item.fromuserid == touserid"
                      :src=userinfo.userimage
                    ></el-avatar>
                  </div></div
              ></el-col>
            </el-row>
          </div>
          <div
            style="
              width: 1250px;
              height: 181px;
              background-color: RGB(238, 241, 246);
              line-height: 181px;
            "
          >
            <el-input
              type="textarea"
              :rows="8"
              placeholder="请输入内容"
              v-model="sendMessageText"
              style="width: 1100px"
            >
            </el-input>
            <el-button
              type="info"
              round
              style="width: 150px"
              @click="sendMessage()"
              >发送</el-button
            >
          </div>
        </div>
        <router-view v-if="showChat == 0"></router-view>
      </el-main>
      <!-- <el-footer
        style="text-align: right; font-size: 12px; background-color: black"
      ></el-footer> -->
    </el-container>
  </el-container>
</template>
  
  <script>
import { parse } from "path";

export default {
  beforeRouteEnter(to, from, next) {
    console.log(to);
    console.log(from);
    console.log(next);
    if (from.name == "Login" || from.name == null) {
      next();
    } else {
      next(false);
    }
  },
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    };
    return {
      tableData: Array(20).fill(item),
      userinfo: {},
      friendinfo: {},
      tagList: [],
      userRelationList: [],
      tableDataChat: [],
      newFriendCount: 0,
      touserid: "",
      fromuserid: "",
      showChat: 0,
      showFriendName: "",
      sendMessageText: "",
      websocket: "",
      accept: "",
    };
  },
  created() {
    if (this.$route.params.userInfo) {
      localStorage.setItem(
        "userInfo",
        JSON.stringify(this.$route.params.userInfo)
      );
    }
    this.userinfo = JSON.parse(localStorage.getItem("userInfo"));
    this.$http.get("/system/sysTag/getTag").then((res) => {
      this.tagList = res.data.data;
    });
    this.$http
      .get(
        `/system/tbUserrelation/getFriendRelation?userid=${this.userinfo.userid}`
      )
      .then((res) => {
        this.userRelationList = res.data.data.map((value, index, array) => {
          switch (value.relationlevel) {
            case 0:
              value.relationlevel = "黑名单";
              break;
            case 1:
              value.relationlevel = "普通好友";
              break;
            case 2:
              value.relationlevel = "特别关心";
              break;
          }
          return value;
        });
      });
    this.getNewApplyCount();
  },
  methods: {
    //滚动条保持最底部方法
    scrollToBottom() {
      this.$nextTick(() => {
        var container = this.$el.querySelector(".messageBoxPlus");
        container.scrollTop = container.scrollHeight;
      });
    },
    toAddNewFriendPage() {
      this.showChat = 0;
      console.log("mql,into");
      this.$router.push({ name: "AddNewFriend" });
    },
    toApplyPage() {
      this.showChat = 0;
      this.$router.push({ name: "ReceiveNewFriend" });
    },
    toWithFriendChat(userid, friendid, friendname) {
      this.showChat = 1;
      this.showFriendName = friendname;
      this.touserid = userid;
      this.fromuserid = friendid;
      var that = this;
      this.$http
        .get(
          `/system/tbMessagerelation/getMessageList?fromuserid=${friendid}&touserid=${userid}`
        )
        .then((res) => {
          this.tableDataChat = res.data.data;
          this.scrollToBottom();
          this.getFriendInfo(friendid)
          that.connectWebSocket(userid);
        });
    },
    getNewApplyCount() {
      this.$http
        .get(
          `/system/tbApply/getNewApplyCount?friendid=${
            JSON.parse(localStorage.getItem("userInfo")).userid
          }`
        )
        .then((res) => {
          this.newFriendCount = res.data.data;
          console.log(`wwwwwwwwwwwwwwwwwwwwwwwwwwww` + this.newFriendCount);
        });
    },
    connectWebSocket(userid) {
      var that = this;
      if ("WebSocket" in window) {
        this.websocket = new WebSocket(
          `ws://81.68.216.39:8081/websocket/${userid}`
        );
        this.websocket.onopen = () => {
          console.log(`websocket成功`);
        };
        this.websocket.onmessage = (res) => {
          if (res.data) {
            that.tableDataChat.push(JSON.parse(res.data));
            this.scrollToBottom();
            console.log(that.tableDataChat);
          }
        };
      } else {
        this.$notify({
          title: "失败",
          message: "当前浏览器不支持在线聊天，请更换浏览器",
        });
      }
    },
    sendMessage() {
      if (this.sendMessageText != null) {
        console.log(this.websocket);
        this.websocket.send(this.sendMessageText);
        console.log(this.websocket);
        this.sendMessageText=''
      }
    },
    getFriendInfo(friendid){
      this.$http.get(`/system/sysUser/getUserInfo?userid=${friendid}`).then(res=>{
        this.friendinfo=res.data.data
      })
    }
  },
};
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.text {
  font-size: 14px;
}

.item {
  padding: 0px 0;
}

.box-card {
  width: 563px;
  height: 90px;
}
.messageBox {
  display: flex;
  text-align: center;
  vertical-align: middle;
  margin-top: 20px;
}
.el-row {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  display: flex;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
  